<template>
  <div class="container">
    <NavBar :title="$t('screenSize.title')"></NavBar>
    <!-- 实时显示尺寸 -->
    <div class="size-indicator">
      <p>{{ $t('screenSize.width') }}: {{ width }}px</p>
      <p>{{ $t('screenSize.height') }}: {{ height }}px</p>
    </div>

    <!-- 响应式布局示例 -->
    <div v-if="screen.isMobile()" class="mobile-view">
      {{ $t('screenSize.mobile') }}
    </div>

    <div v-else-if="screen.isTablet()" class="tablet-view">
      {{ $t('screenSize.tablet') }}
    </div>

    <div v-else class="desktop-view">
      {{ $t('screenSize.desktop') }}
    </div>
  </div>
</template>
<script setup lang="ts">
import useScreenSize from '@/hooks/useScreenSize'
import useTheme from '@/hooks/useTheme'
import { onMounted } from 'vue'
import NavBar from '@/components/NavBar.vue'

// 引入主题钩子
const { theme } = useTheme()

// 基础用法（无防抖）
const { width, height } = useScreenSize()

// 带防抖选项的用法（300ms延迟）
const screen = useScreenSize({ wait: 300 })

// 确保组件挂载时应用当前主题
onMounted(() => {
  // 这里不需要额外操作，因为useTheme钩子应该已经在内部处理了初始化
  console.log('当前主题:', theme.value)
})
</script>
<style lang="scss" scoped>
.container {
  padding: 16px;
  background-color: var(--background-color);
  color: var(--text-color);

  .size-indicator {
    padding: 16px;
    background-color: var(--white);
    border-radius: 8px;
  }
}

.mobile-view,
.tablet-view,
.desktop-view {
  padding: 16px;
  background-color: var(--white);
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: var(--text-color);
}

.mobile-view {
  display: block;
}

.tablet-view,
.desktop-view {
  display: none;
}

@media (min-width: 768px) {
  .mobile-view {
    display: none;
  }

  .tablet-view {
    display: block;
  }
}

@media (min-width: 1024px) {
  .tablet-view {
    display: none;
  }

  .desktop-view {
    display: block;
  }
}
</style>